/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
@import 'uview-plus/theme.scss';

/*引入主题变色的scss文件*/
/* 颜色变量 */
//  @import '@/static/css/theme.scss';
//  @import '@/static/css/theme_color.scss';  

// 主色
$uni-primary: #00785e;

/* 行为相关颜色 */
$uni-color-primary: #00785E;
$uni-color-success: #0AAF60;
$uni-color-warning: #F39200;
$uni-color-error: #EB5334;
$uni-star: #fda900;
/* jcg颜色变量 */
$theme-color: #00785E;
$theme-color-opacity: rgba(233, 51, 35, .6);
$bg-star: #f62c2c;
$bg-end: #f96e29;
$bg-star1: #F73730; // 主题渐变色1-开始
$bg-end1: #F86429; // 主题渐变色1-结束


/* 背景颜色 */
$jcg-theme-color: #1DB0FC;
$jcg-bg-color: #fff;
$jcg-bg-color-grey: #F7F7F7; //背景为灰色
$uni-bg-color: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色

/* 边框颜色 */
$uni-border-color: #c8c7cc;

/* 尺寸变量 */
/*字体颜色(少部分其他,不限于字体)*/
$jcg-font-color: #30303C; //文章标题、主要信息、强调内容、段落信息引导词、文字按钮
$jcg-font-color-subtitle: #666666; //通知公告、列表非编辑文字（如订单详情页内订单号、灰黑色按钮等）
$jcg-font-color-assist: #8C8D99; //副标题文字、次要信息、辅助、提示（如首页副标题、已售件数等）
$jcg-font-color-grey: #bbbbbb; //辅助文字、相对弱性文字
$jcg-font-color-disable: #cccccc; //禁用状态文字、弱提示性文字（如搜索框、禁用按钮等）
$jcg-font-color-white: #ffffff; //用于彩色或深色背景上
$jcg-price-color: #FD502F;
/* 文字尺寸 */
$uni-font-size-sm: 24upx;
$uni-font-size-base: 28upx;
$uni-font-size-lg: 32upx;

/* 图片尺寸 */
$uni-img-size-sm: 40upx;
$uni-img-size-base: 52upx;
$uni-img-size-lg: 80upx;

/* Border Radius */
$uni-border-radius-sm: 4upx;
$uni-border-radius-base: 6upx;
$uni-border-radius-lg: 12upx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20upx;
$uni-spacing-row-lg: 30upx;

/* 垂直间距 */
$uni-spacing-col-sm: 8upx;
$uni-spacing-col-base: 16upx;
$uni-spacing-col-lg: 24upx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title: 40upx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle: 36upx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph: 30upx;



/*定义全局颜色变量*/
/*主色*/
$main-color-theme1: #e93323;
$main-color-theme2: #FE5C2D;
$main-color-theme3: #00785E;
$main-color-theme4: #1DB0FC;
$main-color-theme5: #FF448F;

/* 辅色*/
$second-color-theme1: #FE960F;
$second-color-theme2: #FDB000;
$second-color-theme3: #FE960F;
$second-color-theme4: #C4D9EC;
$second-color-theme5: #FEAC41;

/* 价格色*/
$price-color-theme1: #F93323;
$price-color-theme2: #FE5C2D;
$price-color-theme3: #EB4644;
$price-color-theme4: #FD502F;
$price-color-theme5: #FF448F;

/*左侧按钮*/
$left-button-color1: #FE960F;
$left-button-color2: #FDB000;
$left-button-color3: #FE960F;
$left-button-color4: #22CAFD;
$left-button-color5: #282828;

// 首页渐变
$index-gradient-color1: 270deg, #E93323 0%, #F5F5F5 100%;
$index-gradient-color2: 270deg, #FE5C2D 0%, #F5F5F5 100%;
$index-gradient-color3: 270deg, #00785E 0%, #F5F5F5 100%;
$index-gradient-color4: 270deg, #1DB0FC 0%, #F5F5F5 100%;
$index-gradient-color5: 270deg, #FF448F 0%, #F5F5F5 100%;

//
$miaosha-grradient-color1: 270deg, #E93323 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color2: 270deg, #FE5C2D 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color3: 270deg, #1FD06A 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color4: 270deg, #1DB0FC 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
$miaosha-grradient-color5: 270deg, #FF448F 0%, rgba(255, 255, 255, 0.2) 72%, rgba(255, 255, 255, 1) 100%;
/*主渐变色*/
$main-gradient-color1: 90deg, #FF7931 0%, #E93323 100%;
$main-gradient-color2: 90deg, #FF9445 0%, #FE5C2D 100%;
$main-gradient-color3: 55deg, #00785E 0%, #00785E 100%;
$main-gradient-color4: 90deg, #40D1F4 0%, #1DB0FC 100%;
$main-gradient-color5: 90deg, #FF448F 0%, #FF67AD 100%;

/*辅色渐变*/
$second-gradient-color1: 90deg, #FFCA52 0%, #FE960F 100%;
$second-gradient-color2: 270deg, #FFAA36 0%, #FFC93A 100%;
$second-gradient-color3: 90deg, #FFB75A 0%, #FE960F 100%;
$second-gradient-color4: 90deg, #E4F1FD 0%, #C4D9EC 100%;
$second-gradient-color5: 90deg, #FEE04D 0%, #FEC34C 100%;

// 优惠券渐变色
$coupons-gradient-color1: 0deg, #FF7931 0%, #F11B09 100%;
$coupons-gradient-color2: 0deg, #FF9445 0%, #FE5C2D 100%;
$coupons-gradient-color3: 55deg, #00785E 0%, #00785E 100%;
$coupons-gradient-color4: 0deg, #40D1F4 0%, #1DB0FC 100%;
$coupons-gradient-color5: 90deg, #FF448F 0%, #FF67AD 100%;

//砍价按钮渐变
$bargain-btn-color1: 270deg, #FF8831 0%, #F11B09 100%;
$bargain-btn-color2: 270deg, #FF9445 0%, #FE5C2D 100%;
$bargain-btn-color3: 270deg, #70E038 0%, #00785E 100%;
$bargain-btn-color4: 270deg, #40D1F4 0%, #1DB0FC 100%;
$bargain-btn-color5: 270deg, #FF67AD 0%, #FF448F 100%;

//分类页二级菜单按钮颜色
$nav-two-btn1: #FDEBE9;
$nav-two-btn2: #FFEFEA;
$nav-two-btn3: #ECFAEE;
$nav-two-btn4: #E9F7FF;
$nav-two-btn5: #FFEDF4;

$coupons-border1: 1px solid #e93323;
$coupons-border2: 1px solid #FE5C2D;
$coupons-border3: 1px solid #00785E;
$coupons-border4: 1px solid #1DB0FC;
$coupons-border5: 1px solid #FF448F;


// 优惠券淡色
$coupons-light-color1: #FDD9D3;
$coupons-light-color2: #FEE0D2;
$coupons-light-color3: #DBF5D6;
$coupons-light-color4: #D1F1FB;
$coupons-light-color5: #FFD8E7;

//tab下划线
$tab-border-bottom1: 4rpx solid #e93323;
$tab-border-bottom2: 4rpx solid #FE5C2D;
$tab-border-bottom3: 4rpx solid #00785E;
$tab-border-bottom4: 4rpx solid #1DB0FC;
$tab-border-bottom5: 4rpx solid #FF448F;

//小三角
$bragin-border-rate1: #E93323 transparent transparent;
$bragin-border-rate2: #FE5C2D transparent transparent;
$bragin-border-rate3: #00785E transparent transparent;
$bragin-border-rate4: #1DB0FC transparent transparent;
$bragin-border-rate5: #FF448F transparent transparent;


/*
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
*/

//主色
@mixin main_color($color) {
	color: $color;

	[data-theme="theme1"] & {
		color: $main-color-theme1 !important;
	}

	[data-theme="theme2"] & {
		color: $main-color-theme2 !important;
	}

	[data-theme="theme3"] & {
		color: $main-color-theme3 !important;
	}

	[data-theme="theme4"] & {
		color: $main-color-theme4 !important;
	}

	[data-theme="theme5"] & {
		color: $main-color-theme5 !important;
	}
}

//辅色
@mixin second_color($color) {
	color: $color;

	[data-theme="theme1"] & {
		color: $second-color-theme1 !important;
	}

	[data-theme="theme2"] & {
		color: $second-color-theme2 !important;
	}

	[data-theme="theme3"] & {
		color: $second-color-theme3 !important;
	}

	[data-theme="theme4"] & {
		color: $second-color-theme4 !important;
	}

	[data-theme="theme5"] & {
		color: $second-color-theme5 !important;
	}
}

//价格色
@mixin price_color($color) {
	color: $color;

	[data-theme="theme1"] & {
		color: $price-color-theme1 !important;
	}

	[data-theme="theme2"] & {
		color: $price-color-theme2 !important;
	}

	[data-theme="theme3"] & {
		color: $price-color-theme3 !important;
	}

	[data-theme="theme4"] & {
		color: $price-color-theme4 !important;
	}

	[data-theme="theme5"] & {
		color: $price-color-theme5 !important;
	}
}

//左侧按钮
@mixin left_color($color) {
	background-color: $color;

	[data-theme="theme1"] & {
		background-color: $left-button-color1 !important;
	}

	[data-theme="theme2"] & {
		background-color: $left-button-color2 !important;
	}

	[data-theme="theme3"] & {
		background-color: $left-button-color3 !important;
	}

	[data-theme="theme4"] & {
		background-color: $left-button-color4 !important;
	}

	[data-theme="theme5"] & {
		background-color: $left-button-color5 !important;
	}
}

// 详情页优惠券
@mixin coupons_border_color($color) {
	border: $color;

	[data-theme="theme1"] & {
		border: $coupons-border1;
	}

	[data-theme="theme2"] & {
		border: $coupons-border2;
	}

	[data-theme="theme3"] & {
		border: $coupons-border3;
	}

	[data-theme="theme4"] & {
		border: $coupons-border4;
	}

	[data-theme="theme5"] & {
		border: $coupons-border5;
	}
}

//分类页二级菜单按钮
@mixin cate-two-btn($color) {
	background-color: $color;

	[data-theme="theme1"] & {
		background-color: $nav-two-btn1 !important;
	}

	[data-theme="theme2"] & {
		background-color: $nav-two-btn2 !important;
	}

	[data-theme="theme3"] & {
		background-color: $nav-two-btn3 !important;
	}

	[data-theme="theme4"] & {
		background-color: $nav-two-btn4 !important;
	}

	[data-theme="theme5"] & {
		background-color: $nav-two-btn5 !important;
	}
}

@mixin white_left_border {
	border-left-color: #fff !important;
}

@mixin white_right_border {
	border-right-color: #fff !important;
}


//tab下划线
@mixin tab_border_bottom($color) {
	border-bottom: $color;

	[data-theme="theme1"] & {
		border-bottom: $tab-border-bottom1 !important;
	}

	[data-theme="theme2"] & {
		border-bottom: $tab-border-bottom2 !important;
	}

	[data-theme="theme3"] & {
		border-bottom: $tab-border-bottom3 !important;
	}

	[data-theme="theme4"] & {
		border-bottom: $tab-border-bottom4 !important;
	}

	[data-theme="theme5"] & {
		border-bottom: $tab-border-bottom5 !important;
	}
}

// 优惠券淡色
@mixin coupons_light_color($color) {
	background-color: $color;

	[data-theme="theme1"] & {
		background-color: $coupons-light-color1 !important;
	}

	[data-theme="theme2"] & {
		background-color: $coupons-light-color2 !important;
	}

	[data-theme="theme3"] & {
		background-color: $coupons-light-color3 !important;
	}

	[data-theme="theme4"] & {
		background-color: $coupons-light-color4 !important;
	}

	[data-theme="theme5"] & {
		background-color: $coupons-light-color5 !important;
	}
}


//主色背景
@mixin main_bg_color($color) {
	background-color: $color;

	[data-theme="theme1"] & {
		background-color: $main-color-theme1 !important;
	}

	[data-theme="theme2"] & {
		background-color: $main-color-theme2 !important;
	}

	[data-theme="theme3"] & {
		background-color: $main-color-theme3 !important;
	}

	[data-theme="theme4"] & {
		background-color: $main-color-theme4 !important;
	}

	[data-theme="theme5"] & {
		background-color: $main-color-theme5 !important;
	}
}


// 主渐变色
@mixin linear-gradient($color) {
	background: $color;

	[data-theme="theme1"] & {
		background: linear-gradient($main-gradient-color1);
	}

	[data-theme="theme2"] & {
		background: linear-gradient($main-gradient-color2);
	}

	[data-theme="theme3"] & {
		background: linear-gradient($main-gradient-color3);
	}

	[data-theme="theme4"] & {
		background: linear-gradient($main-gradient-color4);
	}

	[data-theme="theme5"] & {
		background: linear-gradient($main-gradient-color5);
	}
}

//辅渐变色
@mixin second-gradient($color) {
	background: $color;

	[data-theme="theme1"] & {
		background: linear-gradient($second-gradient-color1);
	}

	[data-theme="theme2"] & {
		background: linear-gradient($second-gradient-color2);
	}

	[data-theme="theme3"] & {
		background: linear-gradient($second-gradient-color3);
	}

	[data-theme="theme4"] & {
		background: linear-gradient($second-gradient-color4);
	}

	[data-theme="theme5"] & {
		background: linear-gradient($second-gradient-color5);
	}
}

// 首页渐变
@mixin index-gradient($color) {
	background: $color;

	[data-theme="theme1"] & {
		background: -webkit-linear-gradient($index-gradient-color1);
	}

	[data-theme="theme2"] & {
		background: -webkit-linear-gradient($index-gradient-color2);
	}

	[data-theme="theme3"] & {
		background: -webkit-linear-gradient($index-gradient-color3);
	}

	[data-theme="theme4"] & {
		background: -webkit-linear-gradient($index-gradient-color4);
	}

	[data-theme="theme5"] & {
		background: -webkit-linear-gradient($index-gradient-color5);
	}
}

//

@mixin seckill-gradient($color) {
	background: $color;

	[data-theme="theme1"] & {
		background: -webkit-linear-gradient($miaosha-grradient-color1);
	}

	[data-theme="theme2"] & {
		background: -webkit-linear-gradient($miaosha-grradient-color2);
	}

	[data-theme="theme3"] & {
		background: -webkit-linear-gradient($miaosha-grradient-color3);
	}

	[data-theme="theme4"] & {
		background: -webkit-linear-gradient($miaosha-grradient-color4);
	}

	[data-theme="theme5"] & {
		background: -webkit-linear-gradient($miaosha-grradient-color5);
	}
}

@mixin coupons-gradient($color) {
	background-image: $color;

	[data-theme="theme1"] & {
		background-image: -webkit-linear-gradient($coupons-gradient-color1);
	}

	[data-theme="theme2"] & {
		background-image: -webkit-linear-gradient($coupons-gradient-color2);
	}

	[data-theme="theme3"] & {
		background-image: -webkit-linear-gradient($index-gradient-color3);
	}

	[data-theme="theme4"] & {
		background-image: -webkit-linear-gradient($coupons-gradient-color4);
	}

	[data-theme="theme5"] & {
		background-image: -webkit-linear-gradient($coupons-gradient-color5);
	}
}

//砍价按钮 bargain-btn-color1
@mixin bargain-btn($color) {
	background-image: $color;

	[data-theme="theme1"] & {
		background-image: -webkit-linear-gradient($bargain-btn-color1);
	}

	[data-theme="theme2"] & {
		background-image: -webkit-linear-gradient($bargain-btn-color2);
	}

	[data-theme="theme3"] & {
		background-image: -webkit-linear-gradient($bargain-btn-color3);
	}

	[data-theme="theme4"] & {
		background-image: -webkit-linear-gradient($bargain-btn-color4);
	}

	[data-theme="theme5"] & {
		background-image: -webkit-linear-gradient($bargain-btn-color5);
	}
}

//砍价弹框小三角
@mixin bragin-border-rate($color) {
	border-color: $color;

	[data-theme="theme1"] & {
		border-color: $bragin-border-rate1;
	}

	[data-theme="theme2"] & {
		border-color: $bragin-border-rate2;
	}

	[data-theme="theme3"] & {
		border-color: $bragin-border-rate3;
	}

	[data-theme="theme4"] & {
		border-color: $bragin-border-rate4;
	}

	[data-theme="theme5"] & {
		border-color: $bragin-border-rate5;
	}
}